<template>
  <div class="article-detail">
    <div class="detail-header">
      <img :src="detailInfo.avatarUrl" alt="">
      <div class="author-info">
        <view>作者：{{ detailInfo.nickName }}</view>
        <view>发布时间：{{ formatDate }}</view>
      </div>
    </div>
    <div class="article-info">
      <view class="article-subTitle">{{ detailInfo.subTitle }}</view>
      <view class="article-content">{{ detailInfo.content }}</view>
    </div>
    <Comment />
  </div>
</template>

<script>
  import moment from 'moment'
  import { requestUrl, wxRequest } from '../../requestApi/request'
  import Comment from '../../components/comment'
  export default {
    data () {
      return {
        detailInfo: {}
      }
    },
    components: {
      Comment
    },
    methods: {
      getArticleDetail (articleId) {
        wxRequest({
          url: requestUrl.getArticleDetail,
          data: {
            articleId // GET的传参方式
          }
        }).then((result) => {
          const { data } = result
          if (data.code === 200) {
            this.detailInfo = data.message
          }
        }).catch((err) => {
          console.log(err)
        })
      }
    },
    onLoad () {
      // 在onLoad中获取参数
      const { articleId } = this.$root.$mp.query
      this.getArticleDetail(articleId)
    },
    computed: {
      formatDate () {
        return moment(this.detailInfo.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
    }
  }
</script>

<style scoped>
  .article-detail {
    padding: 20rpx;
  }
  .detail-header {
    display: flex;
    align-items: center;
  }
  .detail-header > img {
    width: 90rpx;
    height: 90rpx;
    border: 1px solid rgb(228, 222, 222);
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 20rpx;
  }
  .author-info {
    color: lightgray;
    font-size: 14px;
    flex: 1;
  }
  .article-info {
    padding: 20rpx 40rpx 0;
  }
  .article-subTitle {
    color: skyblue;
    font-size: 16px;
    word-break: break-all;
  }
  .article-content {
    margin: 20rpx;
    font-size: 16px;
    word-break: break-all;
    text-indent: 32px;
  }
</style>